<template>
  <div class="card-body">
<!--    下拉菜单选项-->
    <div class="border-bottom pb-4">
      <div class="row ml-1 pb-3">
<!--        &lt;!&ndash;        院校类型&ndash;&gt;-->
<!--        <div id="col_type" class="pr-3">-->
<!--          <span class="" style="font-size: 20px">院校标签：</span>-->
<!--          <el-cascader-->
<!--              size="large"-->
<!--              :options="options_type"-->
<!--              v-model="selectType"-->
<!--              placeholder="选择院校标签..."-->
<!--              clearable-->
<!--              filterable-->
<!--          >-->
<!--          </el-cascader>-->
<!--        </div>-->
        <!--        院校所在地区-->
        <div id="city">
          <span class="" style="font-size: 20px">所在省份：</span>
          <el-cascader
              size="large"
              :options="provs"
              v-model="selectProv"
              @change="findBySelect"
              placeholder="选择院校所在省份..."
              filterable>
          </el-cascader>
        </div>
        <span class="input-group-btn pl-3">
          <el-button type="" @click="clearSelect()">重置</el-button>
        </span>
      </div>
      <!--    搜索框-->
      <div class="row mt-2">
        <div class="col-md-7 input-group">
          <el-input
              placeholder="请输入院校名称..."
              v-model="find_college"
              clearable
              @keyup.enter.native="findByName">
          </el-input>
        </div>
        <div class="col-md-5">
          <span class="input-group-btn">
            <el-button type="" icon="el-icon-search" @click="findByName()">搜索</el-button>
          </span>
          <span class="pl-3">
            <el-button type="" @click="clearInput()">重置</el-button>
          </span>
        </div>
      </div>
    </div>
    <!--    主体院校列表-->
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-body">
        <!-- 文件项 -->
        <div class="row" v-if="college_info.length>0">
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 p-2" v-for="(colleges) in college_info" :key=colleges.college_id>
            <div class="thumbnail">
              <div class="imgHeight">
                <img :src="'/api/storage/college_img/'+colleges.college_img"
                     style="width:100%;height:95%;object-fit:contain;"  alt="...">
              </div>
              <div class="caption">
                <div style="text-align: center;color: #6b6e71" class="capChild">
                  <a class="name" style="font-weight: bold;font-size: 25px;" href="javascript:void(0);" @click="one_col(colleges.college_id)">{{colleges.college_name}}</a>
                  <p class="">
                    <span style="color: black">院校隶属：</span>
                    <span>{{colleges.college_belong}}</span>

                    <span class="pt-2" style="color: black"><br/>所在省份：</span>
                    <span>{{colleges.college_city}}</span>

                    <span class="pt-2" style="color: black"><br/>院校标签：</span>
                    <span style="color: #8d4353">{{colleges.college_label}}</span>
                  </p>
                  <!--                    搜索框-->
                  <el-button @click="one_col(colleges.college_id)" type="primary" plain>查看详细信息</el-button>
                  <el-button @click="collect(colleges.college_id)" type="danger" plain>
                    <i class="fa fa-star-o"></i>点击收藏
                  </el-button>

                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="noFile" v-else>
          <img :src="imgs.noInfo" alt="...">
          <h2>{{this.nullContainer}}</h2>
        </div>
      </div>

      <!--         分页 -->
      <div class="mt-4 mb-4 panel-footer" style="text-align:center;" v-show="college_info.length>0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2,5,10]"
            :page-size="param.limit"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

    </div>

  </div>
</template>

<script>
import noInfo from '@/assets/noFile.png'
import {getAllCollegeInfo,ifCollect,addCollect} from '@/api/College'


export default {
  name: "all_colleges",
  data(){
    return{
      imgs:{
        noInfo
      },
      total:0,
      currentPage: 1,
      //分页
      param: {
        find_name_key: '',
        find_provs_key: '',
        page: 1,
        limit: 12,
      },
      //院校信息
      college_info:[],
      find_college:'',  //院校关键词
      //省份联动
      provs:[
        {label:"北京",value:"北京"},
        {label:"天津",value:"天津"},
        {label:"河北",value:"河北"},
        {label:"山西",value:"山西"},
        {label:"内蒙古",value:"内蒙古"},
        {label:"辽宁",value:"辽宁"},
        {label:"吉林",value:"吉林"},
        {label:"黑龙江",value:"黑龙江"},
        {label:"上海",value:"上海"},
        {label:"江苏",value:"江苏"},
        {label:"浙江",value:"浙江"},
        {label:"安徽",value:"安徽"},
        {label:"福建",value:"福建"},
        {label:"江西",value:"江西"},
        {label:"山东",value:"山东"},
        {label:"河南",value:"河南"},
        {label:"湖北",value:"湖北"},
        {label:"湖南",value:"湖南"},
        {label:"广东",value:"广东"},
        {label:"广西",value:"广西"},
        {label:"海南",value:"海南"},
        {label:"重庆",value:"重庆"},
        {label:"四川",value:"四川"},
        {label:"贵州",value:"贵州"},
        {label:"云南",value:"云南"},
        {label:"西藏",value:"西藏"},
        {label:"陕西",value:"陕西"},
        {label:"甘肃",value:"甘肃"},
        {label:"青海",value:"青海"},
        {label:"宁夏",value:"宁夏"},
        {label:"新疆",value:"新疆"},
        {label:"台湾",value:"台湾省"},
        {label:"香港",value:"香港"},
        {label:"澳门",value:"澳门"}
      ] ,
      selectProv: '',
      nullContainer:"暂无数据~",
      code:'',


    }
  },
  methods:{
    //获取所有院校信息
    init(){

      getAllCollegeInfo({
        // token: window.sessionStorage.getItem('token'),
        page:this.param.page,
        limit: this.param.limit,
        find_name_key:this.param.find_name_key,
        find_provs_key:this.param.find_provs_key
      }).then(res=>{
          this.college_info=res.data.data;
          this.total=res.data.total;
      });

    },
    //分页
    //搜索一页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.limit=val;
      this.init();
    },
    //搜索第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.page=val;
      this.init();
    },
    //根据院校名搜索
    findByName(){

      var search=this.find_college;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        this.param.find_name_key=this.find_college;
        this.param.find_provs_key='';
        this.init();
        // this.find_college="";
      }

    },
    //清空多级联框
    clearSelect(){
      this.selectProv=[];
      this.param.find_provs_key='';
      this.param.find_name_key='';
      this.init();
    },
    // 清空搜索框
    clearInput(){
      //清空搜索框
      this.find_college="";
      this.param.find_provs_key='';
      this.param.find_name_key='';
      this.init();
    },
    //根据院校地区搜索
    findBySelect(selected){

      if (selected.length === 0) {
        this.param.find_provs_key='';
        this.param.find_name_key='';
        this.selectProv=[];
        this.init();
      }
      else{
        this.param.find_provs_key=this.selectProv[0];
        this.param.find_name_key='';
        this.init();
        // this.selectProv=[];
      }

    },
    //跳转
    one_col(college_id){
      if(this.$router.history.current.path !='/One_Colleges'){
        this.$router.push({path:'/One_Colleges',query:{CollegeId:college_id}});
      }
    },
    handleChange(value) {
      console.log(value);
    },
  //  收藏院校
    collect(college_id){

      ifCollect({
        college_id:college_id,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        //该用户已收藏该院校
        this.code=res.data.code;

        if(this.code==1){
          this.$msg.warning("你已收藏该院校！");
        }else{
          //连接后端收藏
          addCollect({
            college_id:college_id,
            token:window.sessionStorage.getItem('token')
          }).then(result=>{
            if(result.data.code===1){
              this.$msg.success("收藏成功！")
            }else{
              this.$msg.error("收藏失败！");
            }
          });
        }
      });
      this.init();
    },


  },
  created() {
    let _this=this;
    _this.init();
  }
}
</script>

<style scoped>
.noFile{
  padding-top: 300px;
  padding-bottom: 300px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.panel-body{
  padding: 13px 15px 0px 15px;
}
.thumbnail{
  margin: 2px 0px 16px 0px;
  padding: 10px;
  /*border-style: solid;*/
  /*border-width:2px;*/
  /*border-color: #adb5bd;*/
  border-radius: 5px;
}

.thumbnail:hover{
  box-shadow: 0px 0.5px 10px #888888;
}

.thumbnail .caption  {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 5px 9px 5px 9px;
}
.thumbnail .imgHeight{
  height: 200px;
}
</style>
